<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM对象特征</title>
  </head>
  <body>
    <div id="jim">Jimmy</div>
  </body>
  <script>
    /*
    DOM 是一个对象 这个对象和我们之前JS学习的普通对象其实是一样的，我们也可以
      给DON对象像操作普通对象一样操作一些属性或者方法
  */
    let obj = {}
    obj.name = 'jimmy'
    obj.age = 22
    obj.show = () => {
      // 箭头函数的this 指向的是拥有这个箭头函数的对象的父元素  在这里指向的也就是window对象
      console.log(this)
    }
    obj.show()
    obj.show2 = function () {
      // 普通的function函数的this执行的是调用这个function的对象
      console.log(this.name)
    }
    obj.show2()

    let mydiv = document.getElementById('jim')
    console.dir(mydiv) //这个其实就是一个对象  我们也可以操作一些对象的方法
    mydiv.sex = 'man'
    mydiv.age = 22
    mydiv.showage = function () {
      console.log(mydiv.age)
    }
    mydiv.showage() //22
    /* 
      由此可见  我们在操作DOM对象的时候，理论上讲其实是可以想操作普通对象一样操作的
        不同是在于 普通的对象我们主要是我们用来处理一些数据，但是DOM对象本身就存在了
          很多很多的属性和方法  我们再在这个基础上写的时候就容易对原来的一些数据进行修改
            这个是我们不希望看到的
     */
    // 例子
    Object.assign(mydiv, {
      id: 'Jimmy',
      title: '触碰显示哦~',
      onclick() {
        this.style.color = 'red'
      },
    })

    /*
      复习  Onject原型的 assign方法是用于两个对象之间的合并
        在我们对原来的div对象的id修改了之后 那么那个根据原来id获取的原型就将失效
        标签的title属性：  当我们鼠标移入的时候  会有文字提示  这个就是title属性触发的效果

      这个就是我们不用DOM的对象的形式来操作属性的原因  就是因为绑定了太多页面渲染
        方面的属性，说不定我们在操作某个属性的时候  页面的效果就崩塌了
    */
  </script>
</html>
